<template>
  <div id="footer">
    <div class="page-width">
      <ul class="footer-c clearfix">
         <li>
           <h6>哔哩哔哩</h6>
           <a href="#" class="card">关于我们</a>
           <a href="#" class="card">友情链接</a>
           <a href="#" class="card">周边</a>
           <a href="#" class="card">联系我们</a>
           <a href="#" class="card">加入我们</a>
           <a href="#" class="card">官方认证</a>
         </li>
         <li class="middle">
           <h6>传送门</h6>
           <a href="#" class="card">帮助中心</a>
           <a href="#" class="card">高级弹幕</a>
           <a href="#" class="card">活动专题页</a>
           <a href="#" class="card">侵权申诉</a>
           <a href="#" class="card">分院帽计划</a>
           <a href="#" class="card">活动中心</a>
           <a href="#" class="card">用户反馈论坛</a>
           <a href="#" class="card">壁纸站</a>
           <a href="#" class="card">名人堂</a>
         </li>
         <li class="footer-icon">
           <div class="cont">
             <a href="#" class="app">
               <i></i>
               <em>手机端下载</em>
               <img src="../../assets/image/app-qrcode.png" alt="#">
             </a>
             <a href="#" class="weibo">
               <i></i>
               <em>新浪微博</em>
               <img src="../../assets/image/weibo-qrcode.png" alt="#">
             </a>
             <a href="#" class="weixin">
               <i></i>
               <em>官方微信</em>
               <img src="../../assets/image/weixin-arcode.gif" alt="#">
             </a>
           </div>
         </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
#footer{
  width: 100%;
  background-color: #f6f9fa;
}
.footer-c {
  padding: 40px 0;
  font-size: 14px;
  width: 999px;
  margin: 0 auto;
}
.footer-c li {
  float: left;
  width: 325px;
}
.footer-c li h6 {
  padding-bottom: 22px;
  color: #99a2aa;
}
.footer-c li .card {
  float: left;
  width: 100px;
  padding-bottom: 16px;
  font-size: 14px;
}
.footer-c li.middle {
  width: 325px;
  height: 112px;
  padding-left: 24px;
  border-left: 1px solid #e5e9ef;
  border-right: 1px solid #e5e9ef;
}
.footer-c li.footer-icon {
  width: 304px;
}
.footer-c li.footer-icon .cont {
  padding-left: 24px;
}
.footer-c li.footer-icon a {
  position: relative;
  float: left;
  width: 82px;
  text-align: center;
}
.footer-c li.footer-icon a:after {
  display: none;
  content: "";
  position: absolute;
  top: -13px;
  left: 40%;
  width: 16px;
  height: 14px;
  background: url(../../assets/image/wx_arrow.png) no-repeat;
}
.footer-c li.footer-icon a:hover:after {
  display: block;
}
.footer-c li.footer-icon i {
  display: block;
  width: 60px;
  height: 60px;
  margin-left: 11px;
  background: url(../../assets/image/page_icons.png) no-repeat;
}
.footer-c li.footer-icon em {
  line-height: 32px;
}
.footer-c li.footer-icon img {
  position: absolute;
  right: -23px;
  top: -143px;
  display: none;
  width: 98px;
  height: 98px;
  padding: 16px;
  border: 1px solid #e5e9ef;
  background-color: #fff;
}
.footer-c li.footer-icon .weixin img {
  width: 220px;
}
.footer-c li.footer-icon a:hover img {
  display: block;
}
.footer-c li.footer-icon .app i {
  background-position: -1024px -194px;
}
.footer-c li.footer-icon .app:hover i {
  background-position: -1090px -194px;
}
.footer-c li.footer-icon .weibo i {
  background-position: -1024px -322px;
}
.footer-c li.footer-icon .weibo:hover i {
  background-position: -1090px -322px;
}
.footer-c li.footer-icon .weixin i {
  background-position: -1024px -66px;
}
.footer-c li.footer-icon .weixin:hover i {
  background-position: -1090px -66px;
}
</style>